<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Progress Bar examples - Events</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">

<link rel="stylesheet" type="text/css" href="../../build/slider/assets/skins/sam/slider.css" />

<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>


<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>

<style type="text/css">




#containers {
	float:left;
	margin-top:2em;
}


#textContainers {
	overflow:hidden;
	width:200px;
}

#minValueContainer {
	float:left;
}

#maxValueContainer {
	float:right;
}

#status {
	text-align:center;
}

#pbContainer .yui-pb-bar {
	background-color: rgb(127,127,127);
	background-image: none;
}

#control {
	float:right;
	width:300px;
}

fieldset {
	border: thin solid silver;
	background-color:#F0F0F0;
	padding:1em;
	margin:1em;
}

legend {
	font-weight:bold;
	margin:0 0.5em;
	padding:0 0.2em;
}

code {
	background-color:#e0e0e0;
	border:thin solid #c0c0c0;
	white-space:pre;
	font-size:10px;
}

.dp-highlighter th, .dp-highlighter td {
	border:0;
	padding:0;
}
.dp-highlighter .line1, .dp-highlighter  .line2 {
	padding-left:10px;
	white-space:nowrap;
}

</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar examples - Events</h1>
			<p>This example shows how you can use the events that ProgressBar fires.</p>
		</div>
		<div id="bd">
			<div id="containers">
				<div id="pbContainer"></div>
				<div id="textContainers">
					<div id="minValueContainer" class="yui-pb-range">0</div>
					<div id="maxValueContainer" class="yui-pb-range">255</div>
					<div class="yui-pb-caption">
						<span id="valueContainer">127</span> 
						<span id="status"></span>
					</div>
				</div>
			</div>
			<fieldset id="control">
				<legend>Control</legend>
				<fieldset id="valueSet">
					<legend>Value</legend>
					<div id="sliderValue" class="yui-h-slider" tabindex="-1" title="Value slider">
						<div id="sliderValueThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-n.gif"></div>
					</div>
				</fieldset>
				<fieldset id="rangeSet">
					<legend>Range</legend>
					<div id="sliderRange" class="yui-h-slider" title="Range slider">
						<div id="sliderRangeMinThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-e.gif"></div>
						<div id="sliderRangeMaxThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-w.gif"></div>
					</div>
				</fieldset>
			</fieldset>
				
		</div>
		<div id="ft">
			<p>The code to create the ProgressBar is:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var pb = new YAHOO.widget.ProgressBar({
					value:127,
					maxValue:255,
					anim:true
				}).render('pbContainer');
				var anim = pb.get('anim');
				anim.duration = 3;
				anim.method = YAHOO.util.Easing.bounceBoth;
				
			</textarea>
			<p>We are instantiating the ProgressBar and configuring it so that the initial value is 127 which is halfway
			to the maximum we set of 255, starting from the default minimum of 0.
			The range is set so that they translate directly into color values, which we then apply to the bar.The ProgressBar uses the Animation utility so to configure it we have to fetch the instance the ProgressBar
			uses and set its duration and easing method.  We are using an animated ProgressBar with a long duration
			so we can see the events firing, otherwise it all happens too fast. </p>
			
			<p>We are listening to the three events related to movement, 
			the one that signals the start of the movement, <code>progress</code> that is fired several times while it is moving and the 
			one that signals the completion of the movement.  Without animation, the <code>start</code>, <code>progress</code> 
			and <code>complete</code> events fire one after the other in close sequence.</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				pb.on('start',function (value) {
					Dom.get('status').innerHTML = 'Started';
					window.setTimeout(function() {
						Dom.get('status').innerHTML = '';
					},1000);
				});
				
				pb.on('progress',function (value) {
					Dom.setStyle(this.get('barEl'),'backgroundColor','rgb(' + value + ',' + value + ',127)');
					Dom.get('valueContainer').innerHTML = value;
				});
				
				pb.on('complete',function (value) {
					Dom.get('status').innerHTML = 'Stopped';
					window.setTimeout(function() {
						Dom.get('status').innerHTML = '';
					},1000);
				});
			</textarea>
			
			<p>We are doing simple actions with the events. We show a 'Started' sign for one second upon receiving the
			<code>start</code> event, we change the color of the bar itself according to the <code>value</code> 
			received in <code>progress</code> and show that value right below the bar (all events provide the <code>value</code>) and finally, in the
			<code>complete</code> event we show a 'Stopped' sign.
			The <code>value</code> argument in all events provides the nominal value of the ProgresBar, not the size of the bar itself.
			A value of 50 will always be halfway in a range o 0 to 100, whether the ProgressBar is 100 or 500 pixels wide.
			</p>
			
			<p>We have also provided a slider to change the end values for the bar so that we can show how to respond to those
			events and display their values, with the following code. The ProgressBar inherits the attribute change events
			from the Element utility.  There are before and after change events for all configuration attributes.</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				pb.on('minValueChange',function(oArgs)  {
					Dom.get('minValueContainer').innerHTML = oArgs.newValue;
				});
				
				pb.on('maxValueChange',function(oArgs)  {
					Dom.get('maxValueContainer').innerHTML = oArgs.newValue;
				});
			</textarea>
			<p>The containers for the values and status texts are declared as shown below.  Notice the <code>yui-pb-range</code> and <code>yui-pb-caption</code>
			classNames in their declaration.  The ProgressBar itself does not use those classNames at all.  They are defined as part of the SAM
			skin as a convenience to the implementor.</p>
			<textarea name="code" class="HTML" cols="60" rows="1">
				<div id="textContainers">
					<div id="minValueContainer" class="yui-pb-range">0</div>
					<div id="maxValueContainer" class="yui-pb-range">255</div>
					<div class="yui-pb-caption">
						<span id="valueContainer">127</span> 
						<span id="status"></span>
					</div>
				</div>
			</textarea>
		</div>
	</div>
	
<script  type="text/javascript">


	YAHOO.util.Event.onDOMReady( function () {
		var Dom = YAHOO.util.Dom;
		
		var pb = new YAHOO.widget.ProgressBar({
			value:127,
			maxValue:255,
			anim:true
		}).render('pbContainer');
		var anim = pb.get('anim');
		anim.duration = 3;
		anim.method = YAHOO.util.Easing.bounceBoth;
		
		pb.on('start',function (value) {
			Dom.get('status').innerHTML = 'Started';
			window.setTimeout(function() {
				Dom.get('status').innerHTML = '';
			},1000);
		});
		
		pb.on('progress',function (value) {
			Dom.setStyle(this.get('barEl'),'backgroundColor','rgb(' + value + ',' + value + ',127)');
			Dom.get('valueContainer').innerHTML = value;
		});
		
		pb.on('complete',function (value) {
			Dom.get('status').innerHTML = 'Stopped';
			window.setTimeout(function() {
				Dom.get('status').innerHTML = '';
			},1000);
		});

		pb.on('minValueChange',function(oArgs)  {
			Dom.get('minValueContainer').innerHTML = oArgs.newValue;
		});
		
		pb.on('maxValueChange',function(oArgs)  {
			Dom.get('maxValueContainer').innerHTML = oArgs.newValue;
		});
		
		// From here on, it is mostly handling of the Sliders

		var valueSlider = YAHOO.widget.Slider.getHorizSlider('sliderValue',  
            'sliderValueThumb', 0, 200, 0
		);
		valueSlider.setValue(100,true,true,true);
		valueSlider.animate = false;
		
		var valueScale = 1.275, minValue = 0;
		
		valueSlider.subscribe("slideEnd", function() {
			var value = Math.round(valueSlider.getValue() * valueScale + minValue);
			pb.set('value',value);
			window.setTimeout(function() {
				valueSlider.setValue((pb.get('value') - minValue)/ valueScale,true,true,true);
			},1);	
		});
		
		var rangeSlider = YAHOO.widget.Slider.getHorizDualSlider("sliderRange",
            "sliderRangeMinThumb", "sliderRangeMaxThumb",
            200, 0, [0, 200]
		);

		rangeSlider.animate = false;

		rangeSlider.subscribe('slideEnd', function() {
			minValue = Math.round(this.minVal * 1.275);
			pb.set('minValue',minValue);
			var maxValue = Math.round(this.maxVal * 1.275);
			pb.set('maxValue',maxValue);
			valueScale = (maxValue - minValue) / 200;
			valueSlider.setValue((pb.get('value') - minValue) / valueScale,true,true,true);
		}); 

	});
</script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" language="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>
	
